<template>
    <div class="my-button" :style="style">
        <span>
            <slot>点击</slot>
        </span>
    </div>
    
</template>

<script>
export default{
    name: "MyButton",
    props: {
        width:{
            type: [Number,String],
            default: "10vw"
        },
        height:{
            type: [Number,String],
            default: "5vw"
        },
        backgroundColor:{
            type: String,
            default: "#E83A3A"
        }

    },
    // 生命周期的创建阶段，计算属性依赖于data,而且的生成晚于data
    data(){
        function addPx(val){
            return typeof val === "number" ?val + "px":val
        }

        return{
            style: {
                width: addPx(this.width),
                height: addPx(this.height),
                backgroundColor: this.backgroundColor,
            }
        }
    }
}
</script>

// 行内样式不会把px转化成vw
<style lang="scss" scoped>

.my-button{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
}
</style>